<template>
    <div class="establish">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="年级" prop="region">
                <el-select v-model="ruleForm.name" placeholder="请选择活动区域">
                    <el-option v-for="item,index in options" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="name">
                <el-input v-model="ruleForm.region"></el-input>
            </el-form-item>
            <el-form-item label="试卷" prop="paper">
                <el-table
                        :data="list"
                        border>
                    <el-table-column
                            label="学科"
                            width="180">
                        <template slot-scope="scope">
                            <div v-for="item,index in subject" :key="index"><span>{{item.name}}</span>(<span>{{item.levelName}}</span>)</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="257">
                    </el-table-column>
                    <el-table-column
                            prop="operation"
                            label="操作"
                            width="180">
                        <template slot-scope="scope">
                            <el-button  v-for="item,index in  subject" type="danger" @click.native="reomve(index)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <div style="margin-left:100px;">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="reset">重置</el-button>
            <el-button type="success" @click="paper">添加试卷</el-button>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" width="75%">
            <el-form :model="form">
                <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
                    <el-form-item label="年级：">
                        <el-select v-model="ruleForm.name1" placeholder="活动区域">
                            <el-option v-for="item,index in aaa" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="paper1"
                        ref="registTable"
                        border>
                        <el-table-column
                            type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                            prop="id"
                            label="id">
                    </el-table-column>
                        <el-table-column
                            label="学科"
                            width="180">
                        <template slot-scope="scope">
                            <div v-for="item,index in subject" :key="index"><span>{{item.name}}</span>(<span>{{item.levelName}}</span>)</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            width="257">
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                // 当前编辑的数据id
                id:'',
                //当前编辑的数据
                tableData:[],
                ruleForm: {
                    name: '',
                    region: '',
                    name1:''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
                    ],
                    region: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    paper:[
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                options: [
                    {id:1,
                        value: '选项1',
                        label: '一年级'
                    },
                    {
                        id:2,
                        value: '选项2',
                        label: '二年级'
                    },
                    {
                        id:3,
                        value: '选项3',
                        label: '三年级'
                    },
                    {
                        id:4,
                        value: '选项4',
                        label: '四年级'
                    },
                    {
                        id:5,
                        value: '选项5',
                        label: '五年级'
                    },
                    {
                        id:6,
                        value: '选项6',
                        label: '六年级'
                    },
                    {
                        id:7,
                        value: '选项7',
                        label: '初一'
                    },
                    {
                        id:8,
                        value: '选项8',
                        label: '初二'
                    },
                    {
                        id:9,
                        value: '选项9',
                        label: '初三'
                    },
                    {
                        id:10,
                        value: '选项10',
                        label: '高一'
                    },
                    {
                        id:11,
                        value: '选项11',
                        label: '高二'
                    },
                    {
                        id:12,
                        value: '选项12',
                        label: '高三'
                    }],
                list:[],
                //学科
                subject:[],
                aaa:[],
                //试卷添加
                paper1:[],
                //选中的试卷
                pitch:[]
            }
        },
        mounted() {
            //获取当前编辑的id
            this.id=this.$route.query.id
            if(this.id==''){
                return
            }
            this.getTask();
        },
        methods:{
            getTask(){
                //获取当前点击的编辑数据
                this.axios({
                    url:"/api/admin/task/select/"+this.id,
                    method:"post"
                }).then(res=>{
                    if(res.data.code==1){
                        this.list = res.data.response.paperItems;
                        let a = this.options.filter(a=>a.id==res.data.response.gradeLevel)
                        this.ruleForm.name = a[0].label
                        this.ruleForm.region = res.data.response.title;
                        //获取学科列表
                        this.axios({
                            url:"/api/admin/education/subject/list",
                            method:"post"
                        }).then(res1=>{
                            if(res1.data.code=1){
                                this.aaa = res1.data.response;
                                let b = res1.data.response.filter(c=>c.id == this.id)
                                this.subject = b;
                            }
                        })
                    }
                })
            },
            reset(){
                //重置
                this.ruleForm.name = '';
                this.ruleForm.region = '';
            },
            hh(){
            },
            paper(){
                //获取试卷信息
                this.dialogFormVisible = true;
                let arr = this.subject[0].level
                this.axios({
                    url:"http://localhost:8080/api/admin/exam/paper/taskExamPage",
                    method:"post",
                    data:{
                        level: arr,
                        pageIndex: 1,
                        pageSize: 5,
                        paperType: 6,
                        subjectId: null
                    }
                }).then(res=>{
                    console.log(res);
                    if(res.data.code==1){
                        this.paper1 = res.data.response.list;
                        var obj2 = [{
                            "checkbox":false
                        }]
                        this.paper1 = this.paper1.map((item,index) => {
                            return {...item, ...obj2[index]};
                        });
                        console.log(this.paper1);
                    }
                })
            },
            reomve(index){
                //删除
                this.list.splice(index,1);
            },
            add(){
                //添加试卷
                this.dialogFormVisible = false;
                this.list = this.list.concat(this.$refs.registTable.selection)
                let obj = {}
                //数组去重
                this.list = this.list.reduce((preVal,curVal) => {
	                obj[curVal.id] ? "" : obj[curVal.id] = preVal.push(curVal)
		            return preVal
	            },[])
                this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                });
            },
            submit(){
                //提交成功
                let obj = {
                    "id": this.id,
                    "gradeLevel": 1,
                    "title":this.ruleForm.region,
                    "paperItems": [
                        {
                            "id": this.id,  //试卷id
                            "name": "中级任务一",  //试卷名称
                            "questionCount": 5,  //题目数量
                            "score": 180,  //试卷分数
                            "createTime":this.list.createTime,  //创建时间
                            "createUser": 2,  //创建人
                            "subjectId": 1,  //学科
                            "paperType": 6,  //试卷类型
                            "frameTextContentId": 12  //试卷内容
                        }
                    ]
                }
                this.axios({
                    url:"/api/admin/task/edit",
                    method:"post",
                    data:obj
                }).then(res=>{
                    if(res.data.code = 1){
                        this.$message({
                            message: '恭喜你，提交成功',
                            type: 'success'
                        });
                        this.$router.push("/task/list")
                    }
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .establish{
        width:97%;
        padding:0 20px 20px 20px;
    }
    .el-form-item__label::before{
        content: '*' !important;
        color: #F56C6C !important;
        margin-right: 4px !important;
    }
</style>